<template>
  <view>
    <scroll-view class="chat-content" scroll-y="true" :scroll-into-view="scrollIntoView">
      <view v-for="(message, index) in messages" :key="index" class="chat-bubble">
        <view :class="message.isMe ? 'chat-message-me' : 'chat-message-friend'">
          <text class="chat-message-text">{{ message.content }}</text>
        </view>
      </view>
    </scroll-view>
    <view class="chat-input">
      <input type="text" v-model="inputValue" placeholder="请输入消息" @confirm="sendMessage" />
      <button class="chat-button" @click="sendMessage">发送</button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      messages: [
        {
          content: '你好，我是你的好友。',
          isMe: false
        }
      ],
      inputValue: '',
      scrollIntoView: ''
    }
  },
  methods: {
    sendMessage() {
      if (!this.inputValue) {
        return
      }
      this.messages.push({
        content: this.inputValue,
        isMe: true
      })
      this.inputValue = ''
      this.$nextTick(() => {
        this.scrollIntoView = `msg-${this.messages.length - 1}`
      })
    }
  }
}
</script>
<style>
.chat-content {
  height: 80vh;
  padding: 20rpx;
}

.chat-bubble{
	 display: flex;
  justify-content: flex-end;
  margin: 10px;
}
.chat-message-me {
  /* max-width: 60%; */
  margin-left: auto;
  margin-bottom: 20rpx;
  padding: 30rpx;
  border-radius: 10rpx;
  background-color: #409eff;
  color: #fff;
  text-align: right;
}
.chat-message-friend {
  /* max-width: 60%; */
  margin-right: auto;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
  color: #333;
  text-align: left;
}
.chat-message-text {
  font-size: 32rpx;
}
.chat-input {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
}
.chat-input input {
  flex: 1;
  height: 60rpx;
  padding: 10rpx;
  border: none;
  border-radius: 30rpx;
  background-color: #f5f5f5;
}
.chat-button {
  margin-left: 20rpx;
  height: 60rpx;
  padding: 0 30rpx;
  border: none;
  border-radius: 30rpx;
  background-color: #409eff;
  color: #fff;
  font-size: 28rpx;
}
</style>